<template>
  <xy-page>
    <div class="viewImg">
      <el-form :model="form" status-icon ref="form">
        <el-form-item label="使用默认设置:" :label-width="labwidth">
          <el-switch v-model="form.setting" class="ft10" @change="updateSwitch"></el-switch>
        </el-form-item>
        <div v-if="!form.setting">
          <el-form-item label="观看条件:" :label-width="labwidth" >
            <el-radio v-model="form.radio" label="none">无限制</el-radio>
            <el-radio v-model="form.radio" label="code" >验证码</el-radio>
            <el-radio v-model="form.radio" label="external" @change="radioChange">第三方鉴权</el-radio>
          </el-form-item>
          <div v-if="form.radio == 'code'">
            <el-form-item label="验证码:" :label-width="labwidth">
              <el-input v-model="form.verify" class="w200" clearable maxlength="8" ></el-input>
            </el-form-item>
            <el-form-item label="欢迎标题:" :label-width="labwidth">
              <el-input v-model="form.welcomeTitle" class="w200" clearable ></el-input>
            </el-form-item>
          </div>
          <div v-else-if="form.radio == 'external'">
            <el-form-item label="SecretKey:" :label-width="labwidth">
              <el-input v-model="form.keyCode" class="w300" disabled></el-input>
              <el-button @click="dialogVisible = true">换一个</el-button>
            </el-form-item>
            <el-form-item label="自定义URL:" :label-width="labwidth">
              <el-input v-model="form.setUrl" class="w300" placeholder="请输入自定义地址" c></el-input>
            </el-form-item>
            <el-form-item label="跳转地址:" :label-width="labwidth">
              <el-input v-model="form.jumpUrl" class="w300" placeholder="请输入自定义地址"></el-input>
            </el-form-item>
          </div>
            <el-form-item :label-width="labwidth">
              <el-button v-if="form.radio == 'external'" type="primary" @click="save" :loading="loading" :disabled="!form.setUrl || !form.jumpUrl">保存</el-button>
              <el-button v-else type="primary" @click="save" :loading="loading" >保存</el-button>
            </el-form-item>
        </div>
        <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%" :modal="false" :close-on-click-modal="false">
          <span>更换secretkey后,旧授权将无法使用您确认要更换SecretKey吗?</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="replaceKey">确定更换</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>
      </el-form>
    </div>
  </xy-page>
</template>

<script>
export default {
  data() {
    return {
      labwidth: '120px',
      form: {
        setting: true,
        radio: 'none',
        verify: '', // 验证码
        welcomeTitle: '', // 验证码欢迎标题
        keyCode: '', // secretKey
        setUrl: '', // 自定义URL
        jumpUrl: '', // 跳转地址
      },
      channelId: '',
      appId: '',
      loading: false,
      dialogVisible: false
    }
  },
  methods: {
    radioChange(){
      if(this.form.radio == 'external'){
        if(!this.form.keyCode){
          this.replaceKey()
        }
      }
    },
    replaceKey(){//换一个key
      this.$postStream('/admin/instance/ccb/polyv/common/createSecretKey.do', {
        success: res => {
          if(res.success){
            this.form.keyCode = res.object.secretKey
            this.dialogVisible = false
          }
        }
      })
    },
    getCondition(){//获取观看条件
      this.$postStream('/admin/instance/ccb/polyv/pageview/condition/getViewCondition.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId
        },
        success: res=> {
          if(res.success){
            let element = res.object
            if(element.rank == 1){ // 1:主观看条件
              if(element.globalSettingEnabled == 'N'){
                this.form.setting = false
              }else{
                this.form.setting = true
              }
              if(element.enabled == 'N'){
                this.authType = 'none'
              }else{
                this.form.radio = element.authType
                this.form.verify = element.authCode
                this.form.welcomeTitle = element.qcodeTips
                this.form.keyCode = element.externalKey
                this.form.setUrl = element.externalUri
                this.form.jumpUrl = element.externalRedirectUri
              }
            }

          }else{
            this.$message.error('获取观看条件失败!')
          }
        }
      })
    },
    save(){// 保存
      if(this.form.radio != 'none'){
        this.setCondition()
      }else{
        this.noneCondition(()=>{
          this.$message.success('设置成功!')
        })
      }
    },
    // 设置观看条件(验证码/第三方鉴权)
    setCondition(){
      if(this.form.radio == 'external'){
        if(!this.$utils.isHttp(this.form.setUrl)){
          this.$message.error('请输入正确的自定义url')
          return
        }
        if(!this.$utils.isHttp(this.form.jumpUrl)){
          this.$message.error('请输入正确的跳转地址')
          return
        }
      }
      if(this.form.radio == 'code'){
        if(!this.form.verify.trim()){
          this.$message.error('验证码不能为空')
          return
        }else if(!this.$utils.isQuantity(this.form.verify)){
          this.$message.error('验证码不能为非数字')
          return
        }
        if(!this.form.welcomeTitle.trim()){
          this.$message.error('欢迎标题不能为空')
          return
        }
      }
      this.loading = true
      this.$postStream('/admin/instance/ccb/polyv/pageview/condition/updateViewCondition.do',{
        data:{
          appId: this.appId,
          channelId:this.channelId,
          authCode: this.form.verify,
          authType: this.form.radio,
          enabled: 'Y',
          externalKey: this.form.keyCode,
          externalRedirectUri: this.form.jumpUrl,
          externalUri: this.form.setUrl,
          price: '',
          qcodeImg: '',
          qcodeTips: this.form.welcomeTitle,
          rank: 1,
          validTimePeriod: 0,
          watchEndTime: ''
        },
        success:res=>{
          if(res.success){
            this.$message.success('设置成功!')
            this.getCondition()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('设置失败!')
          }
        },
        complete: ()=>{
          this.loading = false
        }
      })
    },
    noneCondition(cb){
      this.$postStream('/admin/instance/ccb/polyv/pageview/condition/updateViewCondition.do',{
        data:{
          appId: this.appId,
          channelId:this.channelId,
          rank: 1,
          enabled: 'N',
        },
        success:res=>{
          if(res.success){
            this.getCondition()
            cb && cb()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('设置失败!')
          }
        },
        complete: ()=>{
          this.loading = false
        }
      })
    },
    // 修改默认设置开关
    updateSwitch(){
      this.$postStream('/admin/instance/ccb/polyv/channel/enabled/update.do', {
        data: {
          appId: this.appId,
          channelId: this.channelId,
          globalEnabledType: 'auth',
          enabled: this.letterChange(this.form.setting)
        },
        success: res => {
          if(res.success){
            if(this.form.setting){
              this.$message.success('开启成功')
            }else{
              this.$message.success('关闭成功')
              this.noneCondition()
            }
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('开关状态修改失败')
            this.form.setting = !this.form.setting
          }
        },
        error: () => {
          res.code == 50001?this.$message.error(res.message):this.$message.error('开关状态修改失败')
          this.form.setting = !this.form.setting
        }
      })
    }
  },
  mounted() {
    this.channelId = sessionStorage.getItem('channelId')
    this.appId = sessionStorage.getItem('appId') || ''
    this.getCondition()
  }
};
</script>

<style lang="scss" scoped>

</style>
